<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <nav style="width:300px;height:300px;background:lightblue;">
    <form action="javascript:alert('我被提交了');" method="get">
        <input type="text" id="input">
        <input type="button" value="按钮">
        <div id="toP" onclick="pay()" href="javascript:;"  class="mui-btn mui-btn-block mui-btn-myRed" style="line-height: 39px;">继续支付</div>
    </form>
    <button ></button>
  </nav>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="Renewal2.js"></script>
  <script>
    $(function(){
      /**
       * scroll
       * mouseenter
       *  只有在鼠标指针穿过被选元素时，才会触发mouseenter事件
       * mouseleave
       * mouseover mouseout 不经常使用
       *  无论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件
       */
      $('nav').mouseover(function(){

      })
      $('nav').mousemove(function(){
        
      })

      // $(document).keydown(function(e){
      //   console.log(e.key, e.keyCode)
      // })
      // $(document).keypress(function(e){
      //   console.log(e.key, e.keyCode)
      // })
      $.each(['a', 'b', 'c'], function(i, n){
        if(n == 'c'){
          return false
        }
        console.log(i, n)
      })
      $.each({name: 'z3', age: 20}, function(i, n){
        console.log(i, n)
      })

      // 其他事件 ready当DOM就绪 不破坏顶级全局空间
      // resize 当调整浏览器大小时触发 不能使用document，只能使用window对象
      // focus blur
      // change 失去焦点时触发 
      // select select表单用change事件 当文本被选中会触发 非表单元素不能生效，可编辑输入框
      // submit 当提交表单的时候 当button标签放到form中时，就会提交表单
      //     阻止表单提交、表单验证、提交表单
      $(window).resize(function(){
        console.log(111)
      })
      // $("#input").change(function(e){
      //   console.log('change event emit')
      // })
      $("#input").select(function(e){
        console.log('select event emit')
      })

      $('input[type=button]').click(function(){
        $('form').submit()
      })
      $('form').submit(function(){
        var inputValue = $('input[type=text]').val()
        if(inputValue !== 'abc'){
          return false
        }
      })

      $(document).keydown(function(event){
        if(event.keyCode == 37){
          console.log('向左')
        } else if(event.keyCode == 39){
          console.log('向右')
        } else {
          return true
        }
      })

      // 事件绑定与取消 on方法代替 bind live delegate
      $(document).on('mouseenter', 'a', function(){
        event.stopPropagation()
        event.preventDefault()
      })

      // 取消事件绑定off移除事件函数绑定
      $('a').add(document).on('keydown', function(){})

    })
  </script>
</body>
</html>